<template>
  <div id="app">
    <!-- 测试scoped作用 -->
    <!-- 测试非父子通信 -->
    <BaseOne />
    <BaseTwo />

    <!-- data是个函数 -->
    <BaseCount
      :count="count"
      @changeCount="changeCount"
    />
    <!-- <BaseCount></BaseCount> -->
    <!-- <BaseCount></BaseCount> -->

    <!-- 父传子 -->
    <div class="son">
      我是App组件
      <!-- 给组件标签,添加属性的方式,传值 -->
      <!-- 2.父组件,对消息进行监听 -->
      <Son
        :title="myTitle"
        @changeTitle="handleChange"
      />
    </div>

    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :bobby="bobby"
    />

    <BaseProgress
      :style="{ margin: '10px 0' }"
      :w="w"
    />

    <!-- 小黑记事本 -->
    <BlankNotePad />

    <!-- provide & inject 跨层级共享数据-->
    <CrossLevelSharing />

    <!-- v-model详情 -->
    <VModelPrinciple />

    <!-- async修饰符 -->
    <!-- :visible.sync 等价于 :visible + @update.visible -->
    <button
      class="logout"
      @click="isShow = true"
    >退出按钮</button>
    <BaseDialog
      :visible.sync="isShow"
    />

    <!-- ref和$refs获取dom对象 -->
    <div class="base-chart-box" style="width: 100px; height: 100px">
      我是个捣乱的盒子
    </div>
    <BaseCharts />

    <!-- ref和$refs获取组件实例 -->
    <div class="ref-form">
      <BaseForm ref="baseForm" />
      <button @click="handleGet">获取数据</button>
      <button @click="handleReset">重置数据</button>
    </div>

    <!-- Vue异步更新和$nextTick -->
    <AsyncUpdate />
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
import Son from './components/Son.vue'
import UserInfo from './components/UserInfo.vue'
import BaseCount from './components/BaseCount.vue'
import BlankNotePad from './components/blackNotepad/BlankNotePad.vue'
import BaseOne from './components/BaseOne.vue'
import BaseTwo from './components/BaseTwo.vue'
import CrossLevelSharing from './components/expand/CrossLevelSharing.vue'
import VModelPrinciple from './components/VModelPrinciple.vue'
import BaseDialog from './components/BaseDialog.vue'
import BaseCharts from './components/BaseCharts.vue'
import BaseForm from './components/BaseForm.vue'
import AsyncUpdate from './components/AsyncUpdate.vue'

export default {
  name: 'App',
  data() {
    return {
      isShow: false,
      count: 520,
      w: 50,
      myTitle: 'study it, come to itcast',
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      bobby: ['篮球', '足球', '羽毛球']
    }
  },
  components: {
    BaseOne,
    BaseTwo,
    BaseCount,
    Son,
    UserInfo,
    BaseProgress,
    BlankNotePad,
    CrossLevelSharing,
    VModelPrinciple,
    BaseDialog,
    BaseCharts,
    BaseForm,
    AsyncUpdate
  },
  methods: {
    changeCount(newCount) {
      this.count = newCount
    },
    handleChange(newTitle) {
      console.log(newTitle)
      this.myTitle = newTitle
    },
    handleGet() {
      const obj = this.$refs.baseForm.getValues()
      console.log(obj)
      this.handleReset()
    },
    handleReset() {
      this.$refs.baseForm.resetValues()
    }
  },
}
</script>

<style scoped>
.son {
  border: 3px solid #000;
  margin: 10px;
}
.logout {
  margin: 10px 0;
}
.ref-form {
  margin: 10px 0;
  border: 2px solid #ccc;
  padding: 10px;
}
.ref-form button{
  margin: 10px;
}
</style>
